<script setup>
import {reactive, ref} from "vue";
import api from '@/api'
import {ElMessage} from "element-plus";
import router from "@/router";

const searchParams = ref({
	param:''
})
const dialogAddForm = ref(false)

const form = ref({
	projectName: '',
	visibleRange: '',
	description: ''
})

const rules = reactive({
	projectName: [
		{ required: true,trigger: 'blur' }
	],
	visibleRange: [
		{
			required: true,
			trigger: 'change'
		},
	],
	description: [
		{
			required: true,
			trigger: 'change'
		},
	]
})

const showFormTypeTitle = ref('')
const showFormTypes = ['新建', '编辑']
const formRef = ref(null)

/**
 * 显示form弹框
 * @param typeIndex ['新建', '编辑']
 * @param row 行数据（用于编辑）
 */
const showForm = (typeIndex, row) => {

	showFormTypeTitle.value = showFormTypes[typeIndex]
	if(row) {
		form.value = JSON.parse(JSON.stringify(row))
	}
	dialogAddForm.value = true
}

/**
* 重置弹框form
*/
const dialogClose = ()=>{
	formRef.value.resetFields()
	form.value = {
		projectName: '',
		visibleRange: '',
		description: '',
		userList:[]
	}
}

const tableRef = ref(null)

/**
 * 提交form
 */
const onsubmit = async () => {
	await formRef.value.validate(async (vaild) => {
		if (vaild) {
			let req
			if(showFormTypeTitle.value === '编辑') {
				req = await api.project.edit.post(form.value)
			}else {
				req = await api.project.add.post(form.value)
			}
			ElMessage({
				message: req.msg,
				type: 'success',
			})
			dialogAddForm.value = false
			tableRef.value.refresh() // 请求列表
		}
	})
}

/**
* 删除
* @param item 单个数据
*/
const onDelete = (item) =>{
	api.project.delete.post({projectIds:[item.id]}).then(res=>{
		ElMessage({
			message: res.msg,
			type: 'success',
		})
		tableRef.value.refresh() // 请求列表
	})
}

/**
 * 删除已选用户
 * @param user
 */
const delSelectUser = (user, formName) =>{
	let	index = form.value[formName].indexOf(user)
	form.value[formName].splice(index, 1)
}

/**
* 已选择用户集合
* @param userList
* @return data
*/
const getSelectUser = (userList) =>{
	form.value.userList = userList
}

const goDetails = (row)=>{
	console.log("点击了row行")
	console.log(row)
	router.push({path:'/demopage',query:{id:row.id }})
}

</script>

<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button icon="el-icon-plus" type="primary" @click="showForm(0)">新建项目</el-button>
<!--				<el-button icon="el-icon-delete" plain type="danger"></el-button>-->
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="tableRef" :apiObj="list.apiObj"  row-key="id"  :params="searchParams"
					 stripe>
				<el-table-column
					type="selection"
					width="50"/>
				<el-table-column label="项目名称">
					<template #default="scope">
						<router-link :to="'/demopage?id=' + scope.row.id">
							<span> {{ scope.row.projectName }} </span>
						</router-link>
					</template>
				</el-table-column>
				<el-table-column label="参与人">
					<template #default="scope">
						<div class="select-user">
							<div class="select-user-list">
								<div class="user-avatar select-user-avatar"
									 v-for="user in scope.row.userList"
									 :key="user.id"
								>
									<el-tooltip :content="user.orgName+' '+user.cn" effect="light" placement="top">
										<div>
											<el-avatar :size="28">{{
													user.cn.substring(user.cn.length - 2)
												}}
											</el-avatar>
<!--											<el-avatar :size="28" class="del-user"-->
<!--													   @click="delSelectUser(user,'userList')">-->
<!--												<el-icon color="red">-->
<!--													<Delete/>-->
<!--												</el-icon>-->
<!--											</el-avatar>-->
										</div>
									</el-tooltip>
								</div>
							</div>
<!--							<AddUserPopover :select="form.userList" @submit="getSelectUser"/>-->
						</div>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="项目负责人"
					prop="responsibleUserName"
					width="150"/>
<!--				<el-table-column-->
<!--					:filter-method="filterHandler"-->
<!--					:filters="sexFilters"-->
<!--					align="center"-->
<!--					label="项目状态"-->
<!--					prop="status"-->
<!--					width="150">-->
<!--					<template #default="scope">-->
<!--						<el-tag v-if="scope.row.sex=='男'">{{ scope.row.sex }}</el-tag>-->
<!--						<el-tag v-if="scope.row.sex=='女'" type="success">{{ scope.row.sex }}</el-tag>-->
<!--					</template>-->
<!--				</el-table-column>-->
				<el-table-column
					label="项目进度"
					prop="process"
					align="center"
					sortable
					width="250">
					<template #default="scope">
						<el-progress :percentage="scope.row.process"/>
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					prop="createTime"
					align="center"
					sortable
					width="250"/>
				<el-table-column
					label="操作"
					align="center"
					width="150">
					<template #default="scope">
						<el-button
							size="small"
							icon="Edit"
							type="primary"
							plain
							circle
							@click="showForm(1,scope.row)"
						/>

						<el-popconfirm title="您确定要删掉该项目?" @confirm="onDelete(scope.row)" width="200">
							<template #reference>
								<el-button
									size="small"
									plain
									type="danger"
									icon="Delete"
									circle
								/>
							</template>
						</el-popconfirm>
<!--						<el-button-->
<!--							size="small"-->
<!--							icon="More"-->
<!--							type="primary"-->
<!--							plain-->
<!--							circle-->
<!--							@click="goDetails(scope.row)"-->
<!--						/>-->
						<!--						</el-tooltip>-->

					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<el-dialog
		v-model="dialogAddForm"
		:close-on-click-modal="false"
		@close="dialogClose"
		:title="`${showFormTypeTitle}项目`">
		<el-form
			ref="formRef"
			:model="form"
			label-position="top"
			label-suffix="："
			:show-message="false"
			:rules="rules">
			<el-form-item label="项目名称" prop="projectName">
				<el-input  maxlength="60" show-word-limit v-model="form.projectName" autocomplete="off" placeholder="项目名称"/>
			</el-form-item>
			<el-form-item label="可见范围" prop="visibleRange">
				<el-select v-model="form.visibleRange" class="form-select">
					<el-option label="私有：只有加入的成员才能看见此项目" :value="0"/>
					<el-option label="公开：企业所有成员都可以看见此项目" :value="1"/>
				</el-select>
			</el-form-item>
			<el-form-item label="描述" prop="description">
				<el-input
					v-model="form.description"
					:autosize="{ minRows: 5, maxRows: 5 }"
					placeholder="项目描述..."
					type="textarea"/>
			</el-form-item>
			<el-form-item label="参与人">
				<div class="select-user">
					<div class="select-user-list">
						<div class="user-avatar select-user-avatar"
							 v-for="user in form.userList"
							 :key="user.id"
						>
							<el-tooltip :content="user.orgName+' '+user.cn" effect="light" placement="top">
								<div>
									<el-avatar :size="28">{{ user.cn.substring(user.cn.length - 2) }}</el-avatar>
									<el-avatar :size="28" class="del-user" @click="delSelectUser(user,'userList')">
										<el-icon color="red">
											<Delete/>
										</el-icon>
									</el-avatar>
								</div>
							</el-tooltip>
						</div>
					</div>
					<AddUserPopover :select="form.userList" @submit="getSelectUser"/>
				</div>
			</el-form-item>
		</el-form>
		<template #footer>
			  <span class="dialog-footer">
				<el-button text @click="dialogAddForm = false">取消</el-button>
				<el-button type="primary" @click="onsubmit">
				  确定
				</el-button>
			  </span>
		</template>
	</el-dialog>
</template>

<script>
import AddUserPopover from "@/components/addUserPopover/index.vue";

export default {
	name: 'tableBase',
	components: {AddUserPopover},
	data() {
		return {
			sexFilters: [
				{text: '男', value: '男'},
				{text: '女', value: '女'}
			],
			list: {
				apiObj: this.$API.project.list
				// apiObj:''
			}
		}
	},
	created() {
		setTimeout(() => {
			console.log(this.list)
		}, 50000)
	},
	methods: {
		filterHandler(value, row, column) {
			const property = column['property']
			return row[property] === value
		}
	}
}
</script>

<style lang="scss" scoped>
.form-select {
	width: 100%;
}
.select-user {
	display: flex;
	.select-user-list {
		display: flex;
		> div {
			margin-right: 10px;
		}
		.user-avatar {
			> div {
				position: relative;
				&:hover {

					.del-user {
						display: unset;
						position: absolute;
						right: 0px;
						bottom: 0px;
						background: rgba(16, 16, 16, 0.39);
						top: 0px;
					}
				}

				.del-user {
					display: none;
				}
			}
		}
	}
}
</style>
